<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>Document</title>
    <style>
        ul,
        li {
            list-style: none;
        }

        li {
            height: 200px;
            margin-right: 20px;

        }

        #container {
            width: 1000px;
            margin: 0 auto;
            height: 500px;
            display: flex;
            flex-wrap: wrap;

        }

        img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>

    <div id="container">

    </div>
    <script>
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "/dt?include_fields=top_comments%2Cis_root%2Csource_link%2Citem%2Cbuyable%2Croot_id%2Cstatus%2Clike_count%2Csender%2Calbum%2Creply_count&filter_id=头像&start=24&_=1594366274352")
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && /^2[\d]{2}/.test(xhr.status)) {
                // console.log( xhr.responseText );
                var data = JSON.parse(xhr.responseText);
                // console.log(data);
                var list = data.data.object_list;
                var html = "";
                for (var i = 0; i < list.length; i++) {
                    html += `
                                    <li>
                                          <img src="${list[i].photo.path}">
                                          <p>${list[i].msg}</p>
                                    </li>
                              `
                }
                document.querySelector("#container").innerHTML = html;
            }
        }
    </script>
</body>

</html>